// import * as echarts from 'echarts';
import ChartClass from './chartClass';

export default function sandian(dom) {
    // 根据百分比计算背景色
    function getBackgroundColor(percentStr) {
        const percent = parseFloat(percentStr.replace('%', ''));
        if (percent >= 60) return '#ff4757';  // 红色（高百分比）
        if (percent >= 20) return '#ffa726';  // 橙色（中等百分比）
        return '#42a5f5';  // 蓝色（低百分比）
    }

    function getBorderColor(percentStr) {
        const percent = parseFloat(percentStr.replace('%', ''));
        if (percent >= 60) return '#ff3742';
        if (percent >= 20) return '#ff9800';
        return '#2196f3';
    }

    var data2 = [
        {
            name: "马云马老板",
            children: [
                {
                    //子集
                    name: "北京国风信通科技有限公司",
                    value: "控股",
                    percent: "60%",
                    money: "120万元",
                    bgColor: getBackgroundColor("60%"),
                    borderColor: getBorderColor("60%")
                },
                {
                    name: "北京阿里巴巴信息技术有限公司",
                    value: "控股",
                    percent: "1.43%",
                    money: "800万元",
                    bgColor: getBackgroundColor("1.43%"),
                    borderColor: getBorderColor("1.43%")
                },
                {
                    name: "高德软件有限公司",
                    value: "控股",
                    percent: "67%",
                    money: "16242.4242万元",
                    bgColor: getBackgroundColor("67%"),
                    borderColor: getBorderColor("67%")
                },
                {
                    name: "杭州大井头贰拾贰号文化艺术有限公司",
                    value: "控股",
                    percent: "99%",
                    money: "990万元",
                    bgColor: getBackgroundColor("99%"),
                    borderColor: getBorderColor("99%")
                },
            ],
        },
    ];
    var chartDom = dom
    var myChart = new ChartClass(chartDom);

    var option;

    option = {
        tooltip: {
            trigger: "item",
            formatter: "{b}",
        },
        series: [
            {
                type: "tree",
                name: "股权穿透图",
                edgeShape: "polyline", //链接线是折现还是曲线
                orient: "TB",
                data: data2,
                width: 1000,
                height: 200,
                top: "30%",
                left: "5%",
                symbolSize: 1,
                initialTreeDepth: 10,
                hoverAnimation: false, // 禁用悬停动画
                label: {
                    // show: false,

                    position: [-80, 10],  // 调整位置以适应更宽的标签
                    verticalAlign: "middle",
                    align: "left",
                    backgroundColor: "#0084ff",
                    color: "#fff",
                    padding: [15, 20, 15, 20],  // 上右下左的内边距
                    borderWidth: 2,
                    borderColor: "#0070d9",
                    fontWeight: "bold",
                    fontSize: 14,  // 减小字体以适应更多文本
                    minMargin: 15,  // 增加最小边距避免重叠
                    width: 120,  // 设置固定宽度
                    height: 40,   // 设置固定高度
                    overflow: 'break',  // 文本换行而不是截断
                    lineHeight: 16,  // 设置行高
                    // formatter: function(params) {
                    //     // 自定义格式器，确保文本适应宽度
                    //     return params.name;
                    // }
                },
                leaves: {
                    label: {
                        // show: false,
                        position: [-120, 40],
                        verticalAlign: "middle",
                        align: "left",
                        color: "#fff",
                        padding: [15, 20, 15, 20],
                        borderWidth: 2,
                        width: 200,
                        height: 50,
                        fontSize: 12,
                        fontWeight: "bold",
                        overflow: 'truncate',
                        lineHeight: 14,
                        ellipsis: '...',
                        formatter: function (params) {
                            const percent = params.data.percent || '0%';
                            const money = params.data.money || '';
                            // const value = params.data.value || '';
                            const name = params?.name || '';
                            let bg = parseInt(money) >= 1000 ? 'red' : 'container';
                            return `{${bg}|${name}}\n{${bg}|${percent}}\n{${bg}|${money}}`;

                        },
                        backgroundColor: 'transparent',
                        borderColor: "transparent",
                        rich: {
                            container: {
                                backgroundColor: "#0084ff",
                                // borderColor: "#e0e0e0",
                                borderWidth: 1,
                                // borderRadius: 6,
                                padding: [20, 15],
                                width: 200,
                                lineHeight: 30,
                                // lineHeight: 14,
                            },
                            red: {
                                backgroundColor: "#ff4757",

                                // borderColor: "#e0e0e0",
                                borderWidth: 1,
                                // borderRadius: 6,
                                padding: [20, 15],
                                width: 200,
                                lineHeight: 30,
                            }
                        }

                    }
                },


                lineStyle: {
                    color: "#9b97beff",
                },
                expandAndCollapse: false,
                animationDuration: 550,
                animationDurationUpdate: 750,
            },
        ],
    };

    option && myChart.setOption(option);


    // 渲染完成后，添加 graphic
    // myChart.chart.on('finished', function () {
    //     var seriesModel = myChart.chart.getModel().getSeriesByIndex(0);
    //     var data = seriesModel.getData();

    //     // 清空旧的 graphic
    //     //   myChart.chart.setOption({ graphic: [] });
    //     let graphic = [

    //     ]
    //     // 遍历所有节点并添加背景矩形 + 文本
    //     data._graphicEls.forEach((el, index) => {

    //         const layout = { x: 0, y: 0 }
    //         layout.x = el.transform[4]
    //         layout.y = el.transform[5]


    //         if (!layout) return
    //         // 使用 graphic 绘制背景和文本
    //         const groupName = data._idList[index];
    //         // 创建图形组
    //         const graphicGroup = {
    //             type: 'group',
    //             name: groupName, // 分组名称，用于后续查找
    //             id: `group_${index}`, // 唯一标识
    //             position: [layout.x, layout.y], // 组定位（替代单个元素定位）
    //             children: [
    //                 // 第一个图特殊处理：矩形改为椭圆并设置黄色
    //                 index === 2 ? {
    //                     type: 'ellipse',  // 将矩形改为椭圆
    //                     z: 1000,
    //                     shape: {
    //                         cx: 0,       // 椭圆中心x坐标（相对于组原点）
    //                         cy: 0,       // 椭圆中心y坐标（相对于组原点）
    //                         rx: 80,      // x轴半径（原矩形宽度的一半）
    //                         ry: 20       // y轴半径（原矩形高度的一半）
    //                     },
    //                     style: {
    //                         fill: 'rgba(141, 141, 25, 1)',  // 黄色填充
    //                         stroke: 'rgba(0, 0, 0, 0.5)',
    //                         borderRadius: 20  // 可选：添加圆角增强椭圆效果
    //                     }
    //                 } : {
    //                     // 其他节点保持原矩形样式
    //                     type: 'rect',
    //                     z: 1000,
    //                     shape: {
    //                         x: -80, // 相对于组的偏移量
    //                         y: -20,
    //                         width: 160,
    //                         height: 40,
    //                     },
    //                     style: {
    //                         fill: 'rgba(80, 113, 184, 1)',
    //                         stroke: 'rgba(0, 0, 0, 0.5)',
    //                     }
    //                 },
    //                 // 文本元素（可选）
    //                 {
    //                     type: 'text',
    //                     z: 1001,
    //                     style: {
    //                         text: (groupName || '未命名').length > 8 ?
    //                             (groupName || '未命名').slice(0, 8) + '...' :
    //                             (groupName || '未命名'),
    //                         fontSize: 12,
    //                         fill: '#fff',
    //                         // 将textAlign和textVerticalAlign替换为正确的对齐属性
    //                         align: 'center',         // 水平居中
    //                         verticalAlign: 'middle'  // 垂直居中
    //                     },
    //                     // 文本元素定位（相对于组原点）
    //                     left: -60,  // 组原点已在矩形中心
    //                     top: -5,

    //                 }
    //             ]
    //         };

    //         graphic.push(graphicGroup);

    //     });
    //     myChart.chart.setOption({
    //         graphic: graphic
    //     });
    // });

    return myChart
}